/**
* @description: 检修工单领取
* @author: JiWei
* @date:
**/
<template>
  <view class="patrol-task">
    <nav-bar class="header" :background="backgroundColor" back :title="title" @goBack="goBack"/>
    <!-- 搜索框  -->
<!--    <view class="patrol-search">-->
<!--      <van-search-->
<!--          v-model="searchValue"-->
<!--          left-icon=""-->
<!--          :clearable="false"-->
<!--          right-icon="search"-->
<!--          placeholder="请输入站点名称"-->
<!--          @search="onSearch"-->
<!--      />-->
<!--    </view>-->
    <view class="patrol-main" v-if="taskList.length > 0">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <!-- 列表循环   -->
        <van-list
            v-model="isLoading"
            :finished="finished"
            finished-text="没有更多了"
            @load="loadMore"
        >
          <view class="patrol-list" v-for="(item,index) in taskList" :key="index">
            <view class="patrol-title">
              <img src="../../static/img/light.png" alt="">
              <text class="partrol-main-title">{{ item.name }}</text>
              <van-button type="info" class="patrol-btn" @click="toReceive(item)">领取</van-button>
            </view>
            <hr class="patrol-hr">
            <view class="top-patrol-main">
              <text class="patrol-big-ltitle">工作负责人:</text>
              <text class="patrol-small-ltitle">{{ item.taskSiteName }}</text>
            </view>
            <view class="top-patrol-main">
              <text class="patrol-big-ltitle">计划开工时间:</text>
              <text class="patrol-small-ltitle">{{ item.planStartTime }} - {{item.planEndTime}}</text>
            </view>
          </view>
        </van-list>
      </van-pull-refresh>
    </view>
  </view>
</template>
<script>
import navBar from '../../components/common/nav-bar'
import { mapGetters } from 'vuex'
import moment from 'moment'
import { Dialog } from 'vant';
import {getReceiveTask} from "../../api/apiIndex";
export default {
  name: 'taskReceive',
  components: { navBar },
  props: {},
  data() {
    return {
      backgroundColor:'#417ADC',
      title:'检修工单领取',
      searchValue:'',
      taskList:[],
      refreshing:false, // 是否正在刷新
      isLoading: false,
      listParams: {
        state: '1',
        limit: 20,
        page: 1
      },
      total:0,
      finished: false,
    };
  },
  computed: {
    ...mapGetters(['userData'])
  },
  watch: {},
  onLoad() {
    this.getReceiveTaskListP()
  },
  methods: {
    // 获取列表
    getReceiveTaskListP() {
      let params = {
        ...this.listParams,
      }
      this.$api.getList(params).then(res => {
        this.isLoading = false;
        this.refreshing = false;
        this.taskList = this.taskList.concat(res.data.list.map(item => {
          return{
            planStartTime:item.planStartTim ? moment(item.planStartTim).format('YYYY-MM-DD') :null,
            planEndTime: item.planEndTim ? moment(item.planEndTim).format('YYYY-MM-DD') : null,
            ...item
          }
        }));
        this.total = +res.data.total;
      })
    },
    onRefresh() {
      this.refreshing = true;
      this.finished = false;
      this.listParams.page = 1;
      this.taskList = [];
      this.getReceiveTaskListP();
    },
    loadMore() {
      console.log("loadmore")
      if (this.total > this.taskList.length) {
        this.listParams.page = this.listParams.page + 1;
        this.getReceiveTaskListP();
      }else {
        this.finished = true;
      }
    },
    goBack() {
      uni.navigateTo({
        url: '/pages/testProject/index'
      })
    },
    // 领取按钮
    toReceive(item) {
      let params = {
        objId: item.objId,
        executerId: item.tourOperId,
        executerName: item.tourOperName
      }
      this.$api.getReceiveTask(params).then(res => {
        if(res.code == 0) {
          Dialog.confirm({
            title: '领取成功',
            message: '工单领取成功，去完善巡视人员信息',
          }).then(() => {
            this.onRefresh()
          })
        }
      })


    }
  }
};
</script>
<style scoped lang="scss">
.patrol-task {
  width: 100vw;
  height: 100vh;
  background: #F2F6FA;
  overflow: hidden;
  .patrol-search {
    width: px2vw(1020);
    height: 38px;
    margin: px2vw(30) px2vh(30);
    .van-search {
      padding: 0 0;
      height: 38px;
    }
    .van-search__content {
      background: #fff;
      height: 38px;
    }
    /deep/.van-field__control {
      height: 30px;
    }
  }
  .patrol-main {
    height: calc(100vh - #{px2vh(230)} - 38px);
    overflow: auto;
    .patrol-list {
      width: px2vw(1020);
      height: px2vh(340);
      background: #fff;
      border-radius: px2vw(20) px2vh(20);
      margin: px2vh(30)  px2vw(30) px2vh(30) px2vw(30) ;
      .patrol-title {
        width: px2vw(940);
        height: px2vh(80);
        margin-left: px2vw(40);
        padding-top: px2vw(30);
        margin-bottom: px2vh(30);
        img {
          width: px2vw(64);
          height: px2vw(64);
          margin-top: px2vh(6);
          float: left;
        }
        .partrol-main-title {
          margin-left: px2vw(20);
          width: calc(#{px2vw(940)} - #{px2vw(64)} - #{px2vw(220)});
          margin-top: px2vh(8);
          font-size: px2vh(48);
          float: left;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .patrol-btn {
          width: px2vw(200);
          height: px2vh(80);
          background: #417ADC;
          float: right;
          border-radius: px2vw(40) px2vh(40);
        }
      }
      .patrol-hr {
        width: px2vw(940);
        border: px2vh(1) solid #e5e5e5;
        margin-left: px2vw(40);
        margin-bottom: px2vh(42);
      }
      .top-patrol-main {
        width: px2vw(900);
        font-size: px2vh(36);
        line-height: px2vh(62);
        margin-left: px2vw(60);
        .patrol-big-ltitle,.patrol-big-rtitle {
          color: #666;
        }
        .patrol-small-ltitle,.patrol-small-rtitle {
          margin-left: px2vw(25);
          color: #333;
        }
        .patrol-big-rtitle {
          margin-left: px2vw(245);
        }
      }
    }
  }

}
</style>